<template>

<div class="Huangchain">
  <div class="dalian">
    <span class="guide-title">
  大连生活指南
  <template v-if="selectedChannel">
    <span class="guide-path"> &gt; {{ selectedChannel }}</span>
  </template>
  <template v-else-if="currentTabIndex !== -1">
    <span class="guide-path">
      &gt; {{ regionTabs[currentTabIndex]?.title }}
      <span v-if="selectedRegion"> &gt; {{ selectedRegion }}</span>
    </span>
  </template>
</span>
  </div>
    <div class="navigation">
      <!-- 频道部分 -->
      <div class="nav-category J_filter_channel">
        <div class="channel-left">
          <span class="row-label">{{ channelData.title }}:</span>
          <span class="static-label unlimited-label">不限</span>
        </div>
        <div class="channel-right">
          <a
            v-for="(area, index) in channelData.area"
            :key="index"
            href="#"
            class="nav-button"
            @click.prevent="selectChannel(area)"
            :class="{ cur: selectedChannel === area }"
            :title="area"
          >
            <span>{{ area }}</span>
          </a>
        </div>
      </div>
  
      <!-- 地点和tab部分 -->
      <div class="nav-category nav-region-wrapper">
        <div class="region-left">
          <span class="row-label">地点:</span>
         <span class="static-label unlimited-label">不限</span>
        </div>
        <div class="region-right">
          <!-- tab按钮 -->
          <div class="region-tabs">
            <a
              v-for="(tab, index) in regionTabs"
              :key="tab.id"
              href="#"
              class="tab-button"
              :class="{ cur: currentTabIndex === index }"
              @click.prevent="switchTab(index)"
            >
              <span>{{ tab.title }}</span>
            </a>
          </div>
  
          <!-- 内容区域 -->
          <div class="region-content">
            <template v-if="!(selectedChannel === null && currentTabIndex === -1)">
              <div v-if="currentTabIndex === -1" class="unlimited-content content-indent">
                地区不限
              </div>
              <div
                v-else
                class="tab-area content-indent"
                v-if="regionTabs[currentTabIndex]"
                :class="`tab-area-index-${currentTabIndex}`"
              >
                <a
                  v-for="(area, i) in regionTabs[currentTabIndex].area"
                  :key="i"
                  href="#"
                  @click.prevent="selectRegion(area)"
                  :class="{ cur: selectedRegion === area }"
                  :title="area"
                >
                  <span>{{ area }}</span>
                </a>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div></div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import axios from 'axios'
  
  const channelData = ref({ title: '频道', area: [] })
  const regionTabs = ref([])
  
  const selectedChannel = ref(null)
  const selectedRegion = ref(null)
  const currentTabIndex = ref(-1)
  
  async function fetchChannels() {
    try {
      const res = await axios.get('http://localhost:3000/Huangcannel')
      if (res.data && res.data.length > 0) {
        channelData.value = res.data[0]
      }
    } catch (error) {
      console.error('获取频道数据失败', error)
    }
  }
  
  async function fetchRegions() {
    try {
      const res = await axios.get('http://localhost:3000/Huangcannel2')
      if (res.data && res.data.length > 0) {
        const filtered = res.data.filter(tab =>
          ['热门商区', '行政区', '地铁线'].includes(tab.title)
        )
        regionTabs.value = filtered
  
        // 默认显示“热门商区”
        const defaultIndex = filtered.findIndex(tab => tab.title === '热门商区')
        currentTabIndex.value = defaultIndex !== -1 ? defaultIndex : -1
      }
    } catch (error) {
      console.error('获取地区数据失败', error)
    }
  }
  
  function switchTab(index) {
    currentTabIndex.value = index
    selectedChannel.value = null 
    if (index === -1) {
      selectedRegion.value = null
    }
  }
  
  function selectChannel(area) {
    selectedChannel.value = area
    selectedRegion.value = null
  }
  
  function selectRegion(area) {
    selectedRegion.value = area
    selectedChannel.value = null
  }
  
  onMounted(() => {
    fetchChannels()
    fetchRegions()
  })
  </script>
  
  <style scoped>
.dalian {
  width: 100%;
  margin: 10px auto 10px auto;
  background: #fff;
  border-radius: 3px;
}

.guide-title {
  display: block;
  margin-left: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  line-height: 1.2;
  padding: 12px 0 12px 0;
  background: none;
  border: none;
}


.navigation {
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 18px 19px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
  .navigation {
    font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    padding: 18px 19px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0;
    width: 1180px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  /* ================= 频道 ================= */
  .J_filter_channel {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  
  .channel-left {
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .channel-right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .nav-button {
    flex: 0 0 9%;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    padding: 2px 6px;
    line-height: 28px;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    border: 1px solid transparent;
    background: none;
    color: #666;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .nav-button:hover,
  .nav-button.cur {
    color: #ff6000;
    border-color: #ff6000;
    font-weight: bold;
    background: none;
  }
  
  /* ================= 地点 ================= */
  .nav-region-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  
  .region-left {
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .region-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .region-tabs {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    height: 34px;
    background: #eee;
    /* 去掉底部边框，由内容区承担 */
    border-bottom: none;
  }
  
  .tab-button {
    flex: 1 1 0;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none; /* 默认无边框 */
    background: #fff;
    color: #333;
    height: 34px;
    line-height: 32px;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    z-index: 1;
  }
  
  /* 选中tab 样式：上下左右边框，去掉下边框 */
  .tab-button.cur {
    background: #eee !important;
    color: #ff8400 !important;
    font-weight: bold;
    border: 1px solid #dbdee1; /* 四边灰色边框 */
    border-bottom: none;       /* 去掉底部边框 */
    height: 35px;              /* 高一点，突出 */
    line-height: 34px;
    z-index: 3;
    position: relative;
    margin-bottom: -1px;       /* 和内容区边框衔接 */
  }
  
  /* 悬浮效果：只对没选中tab */
  .tab-button:hover:not(.cur) {
    background: #f5f5f5;
    color: #ff8400;
  }
  
  /* 地区内容容器，带边框，顶边无 */
  .region-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #f5f5f5;
    padding: 10px 0 10px 0;
    border-radius: 0 0 4px 4px;
    border: 1px solid #dbdee1;
    position: relative;
    z-index: 0;
  }
  
  /* 地区内容里面单个区域 */
  .tab-area {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    padding-left: 0;
    background: none;
  }
  
  .tab-area a {
    flex: 0 0 9%;
    min-width: 80px;
    font-size: 12px;
    padding: 4px 0;
    line-height: 28px;
    text-align: center;
    border-radius: 0;
    border: none;
    background: none;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 6px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .tab-area a.cur,
  .tab-area a:hover {
    color: #ff6000 !important;
    background: none;
    font-weight: bold;
  }
  
  /* 通用 */
  .row-label {
    color: #222;
    font-weight: 600;
    font-size: 16px;
    user-select: none;
    white-space: nowrap;
  }
  
  .static-label {
    color: #666;
    font-size: 14px;
    user-select: none;
    line-height: 28px;
  }
  
  .nav-button,
  .tab-button,
  .tab-area a {
    text-decoration: none !important;
  }
  .unlimited-label {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    background-color: #ff6000;
    color: #fff;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 1;
    user-select: none;
    cursor: default;
    vertical-align: middle;
    transition: background-color 0.2s;
  }
  
  </style>
  